<template>
	<view class="wrap padding">
		<u-navbar title="团队排名" :autoBack="true" :placeholder="true" leftIconColor="#ffffff" :titleStyle="{color: '#ffffff'}" bgColor="transparent">
		</u-navbar>
		<view class="flex tab-list" :style="{width:width}">
			<view class="tab-item" :class="{'tab-active': tabIndex == 0}" @click="selectTab(0, 2)">消费总额</view>
			<view class="tab-item" :class="{'tab-active': tabIndex == 1}" @click="selectTab(1, 3)" v-show="userInfo.billLevel > 1">报单总额</view>
		</view>
		<view class="myInfo text-white padding margin-top">
			<view class="flex align-center">
				<view>
					<image :src="userInfo.userAvatarUrl ? userInfo.userAvatarUrl : '/static/my/avatar.png'" class="img-115 radius-25"></image>
				</view>
				<view class="margin-left">
					<view class="font-16 text-bold">{{userInfo.nickName}}</view>
					<view class="margin-top-xs">{{$dealTel(userInfo.mobile)}}</view>
				</view>
			</view>
			<view class="flex justify-between align-end">
				<view class="flex text-center">
					<view class="margin-top">
						<view class="font-13">总额</view>
						<view class="font-24 text-bold">{{(tabIndex == 0 ? extend.monetary : extend.taxationMonetary) || 0}}</view>
					</view>
					<view class="margin-top margin-left-xl">
						<view class="font-13">团队人数</view>
						<view class="font-24 text-bold">{{extend.total || 0}}</view>
					</view>
				</view>
				
				<view class="font-13 m-r-50">NO.</view>
			</view>
			<view class="rank-num">{{extend.ranking || ''}}</view>
		</view>
		
		<view class="main-box margin-top radius-10">
			<view class="flex text-center font-13 padding border-bottom margin-bottom-sm">
				<view style="width: 20%;">排名</view>
				<view style="width: 54%;">用户信息</view>
				<view style="width: 26%;">总额</view>
			</view>
			<view class="flex align-center rank-item font-13" v-for="(item, index) in rankList" :key="index">
				<view class="flex align-center justify-center" style="width: 20%;">
				<image src="/static/my/ranking/rank1.png" class="rank-icon" v-if="index == 0"></image>
				<image src="/static/my/ranking/rank2.png" class="rank-icon" v-if="index == 1"></image>
				<image src="/static/my/ranking/rank3.png" class="rank-icon" v-if="index == 2"></image>
				<text :class="item.deleteFlag ? 'color-g':''" v-if="index > 2">{{(index+1)}}</text>
				</view>
				<view class="flex align-center" style="width: 54%;">
					<!-- 	<view class="flex align-center">
						<image :src="item.avatarUrl ? item.avatarUrl : '/static/my/avatar.png'" class="avatar"></image>
					</view> -->
					<view class="padding-left-sm">
						<view class="text-cut flex align-center">
							<view class="widthName" :class="item.deleteFlag ? 'color-g':''">{{item.nickName}}</view>
							<view class="bg-theme text-white padding-lr-sm radius-5 margin-left-sm font-12" style="line-height: 36rpx;height: 36rpx;" v-if="areaId == 3 && item.billLevelName && !item.deleteFlag">{{ item.billLevelName }}</view>
							<view class="bg-theme text-white padding-lr-sm radius-5 margin-left-sm font-12" style="line-height: 36rpx;height: 36rpx;" v-if="areaId == 2 && item.userLevelName && !item.deleteFlag">{{ item.userLevelName }}</view>
							<view class="bg-theme text-white padding-lr-sm radius-5 margin-left-sm font-12" style="line-height: 36rpx;height: 36rpx;" v-if="item.deleteFlag">已注销</view>
						</view>
						<view class="word-break margin-top-xs" :class="item.deleteFlag ? 'color-g':''">{{$dealTel(item.mobile)}}</view>
					</view>
				</view>
				<view class="text-right" :class="item.deleteFlag ? 'color-g':''" style="width: 26%;">{{item.orderAmount || 0}}</view>
			</view>
			<empty :show="rankList.length == 0" />
		</view>
		<u-loadmore :status="status" color="gray" class="padding-bottom padding-top-xs"/>
	</view>
</template>

<script>
	import {
		teamRankingList
	} from '@/common/api/customer.js'
	import { mapState } from 'vuex'
	export default {
		data() {
			return {
				rankList: [],
				pageNo: 0,
				status: 'loading',
				areaId: 2,
				tabIndex: 0,
				extend: {},
				width: '404rpx'
			};
		},
		computed: {
			...mapState('user', ['userInfo'])
		},
		onLoad(options) {
		
		},
		onShow() {
			this.reset()
			this.getTeamRankingList()
			if(this.userInfo.billLevel < 2){
				this.width = '202rpx'
			}
		},
		onReachBottom() {
			this.getTeamRankingList()
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
		},
		methods: {
			reset() {
				this.status = 'loading'
				this.pageNo = 0
				this.rankList = []
			},
			selectTab(index, areaId) {
				if(this.userInfo.billLevel < 2) {
					return this.$msg('您不是服务商')
				}
				this.tabIndex = index
				this.areaId = areaId
				this.reset()
				this.getTeamRankingList()
			},
			getTeamRankingList() {
				this.status = 'loading'
				this.pageNo++
				let params = {
					pageNo: this.pageNo, 
					pageSize: 10, 
					productArea: this.areaId
				}
				if(this.tabIndex == 1) {
					params.isFacilitator = true
				}
				teamRankingList(params).then(res=>{
					uni.hideLoading()
					if(res.code == 200) {
						this.rankList = this.rankList.concat(res.data)
						this.extend = res.extend || {}
						console.log("extend", this.extend)
						if (res.data.length < 10) {
							this.status = 'nomore'
						}
					}
					
				}).catch(err=>{
					uni.hideLoading()
				})
			},
			toBack() {
				uni.navigateBack()
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #f2f2f2;
	}
</style>
<style lang="scss" scoped>
.color-red{
	color: red !important;
}
.widthName{
	width: 160rpx;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.wrap {
	height: 740rpx;
	background: linear-gradient(180deg, #FF6D6D, #F2F2F2);
	
	.tab-list {
		height: 79rpx;
		background: #FFFFFF;
		border-radius: 40rpx;
		margin: 0 auto;
		border: 2rpx solid #E6E6E6;
		.tab-item {
			width: 200rpx;
			height: 75rpx;
			border-radius: 37rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 32rpx;
			color: #999999;
		}
		.tab-active {
			background: #E60000;
			color: #ffffff;
		}
	}
	.myInfo {
		background-image: url('/static/my/rank-bg.png');
		background-size: 100% 100%;
		position: relative;
		
		.rank-num {
			position: absolute;
			right: 30rpx;
			bottom: -16rpx;
			font-size: 196rpx;
		}
	}
	.main-box {
		position: relative;
		z-index: 1002;
		background-color: #ffffff;
		.rank-item {
			margin: 0 30rpx 0 30rpx;
			padding: 24rpx 0;
			position: relative;
			.rank-icon {
				width: 77rpx;
				height: 66rpx;
			}
			.avatar {
				width: 77rpx;
				height: 77rpx;
				border-radius: 50%;
			}
			.myself {
				position: absolute;
				top: 0;
				left: 0;
				width: 71rpx;
				height: 32rpx;
				background: #E60000;
				border-radius: 16rpx 0 16rpx 0;
				font-size: 22rpx;
				color: #ffffff;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
}
</style>
